<template>
  <view class="container">
    <!-- 滚动内容区 -->
    <view class="main">

      <scroll-view
        scroll-y="true"
        class="content"
      >
        <!-- 子分类 -->
        <view
          v-if="subCategoryList.length"
          class="th-cate-con"
        >
          <block
            v-for="(thCateItem, index) in subCategoryList"
            :key="index"
          >
            <view class="sub-category">
              <view
                class="sub-category-item"
                :data-categoryid="thCateItem.id"
                :data-categoryname="thCateItem.name"
                @tap="toCatePage"
              >
                <image
                  :src="thCateItem.img"
                  class="more-pic"
                  mode="aspectFit"
                />
                <text>{{ thCateItem.name }}</text>
              </view>
            </view>
          </block>
        </view>
        <view
          v-else
          class="cont-item empty"
        >
          暂无分类~
        </view>
      </scroll-view>
      <!-- 右侧内容end -->
    </view>
  </view>
</template>

<script setup>
const subCategoryList = ref([])
const categoryImg = ref('')
const parentId = ref('')
/**
 * 生命周期函数--监听页面加载
 */
onLoad(() => {
  // 加载分类列表
  http.request({
    url: '/category/list',
    method: 'GET',
  })
    .then(({ data }) => {
      console.log("分类");
      console.log(data);
      subCategoryList.value = data.records
      console.log(subCategoryList.value);
    })
})

/**
 * 跳转子分类商品页面
 */
const toCatePage = (e) => {
  const { categoryid,categoryname } = e.currentTarget.dataset
  uni.navigateTo({
    url: `/pages/prod-classify/prod-classify?categoryId=${categoryid}&title=${categoryname}`
  })
}

</script>

<style scoped lang="scss">
@import "./category.scss";
</style>
